<template>
    <!-- 通过 flex 指定水平布局 -->
    <!-- 设置背景色为白色、高度为 64px，padding-right 为 4， border-bottom 为 slate 100 -->
    <div class="bg-admin-header h-[64px] flex pr-4 border-b border-slate-100">
        <!-- 左边栏收缩、展开 -->
        <div @click="contration"
            class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700">
            <el-icon>
                <Fold v-if="menuStore.menuWidth == '250px'" />
                <Expand v-else />
            </el-icon>
        </div>

        <!-- 右边容器，通过 ml-auto 让其在父容器的右边 -->
        <div class="ml-auto flex">
            <!-- 点击刷新 -->
            <el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
                <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700"
                    @click="refresh">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                </div>
            </el-tooltip>
            <!-- 点击全屏展示 -->
            <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
                <div @click="toggle"
                    class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 mr-2">
                    <el-icon>
                        <FullScreen v-if="!isFullscreen" />
                        <Aim v-else />
                    </el-icon>
                </div>
            </el-tooltip>

            <!-- 登录用户头像 -->
            <el-dropdown @command="handleCommand" class="avator-border-config flex items-center justify-center">
                <span class="el-dropdown-link flex items-center justify-center text-white text-xs avator-border-config">
                    <!-- 头像 Avatar -->
                    <el-avatar :size="25" class="mr-2" src="https://anime-kitten.oss-cn-beijing.aliyuncs.com/taffy.jpg" />
                    {{ userStore.userInfo.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="$router.push('/')">回到首页</el-dropdown-item>
                        <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <!-- 修改密码对话框 -->
            <el-dialog v-model="dialogVisible" title="修改密码" width="40%" :draggable="true" :close-on-click-modal="false"
                :close-on-press-escape="false">
                <el-form ref="formRef" :model="formValue" :rules="rules">
                    <el-form-item label="用户名" label-width="100px">
                        <el-input size="large" v-model="formValue.username" placeholder="xxx" clearable disabled />
                    </el-form-item>
                    <el-form-item prop="password" label="密码" label-width="100px">
                        <el-input size="large" v-model="formValue.password" placeholder="请输入密码" clearable show-password />
                    </el-form-item>
                    <el-form-item prop="confirmPassword" label="确认密码" label-width="100px">
                        <el-input size="large" v-model="formValue.confirmPassword" placeholder="请再次输入密码" clearable />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitChange">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>


<script setup>
import { useMenuStore } from '@/stores/menu';
import { useFullscreen } from '@vueuse/core';
import { useUserStore } from '@/stores/user';
import { showMessage, showConfirm } from '@/composables/utils';
import { useRouter } from 'vue-router';
import { ref, reactive, watch } from 'vue';
import { changePassword } from '@/api/admin/user';

//收缩侧栏功能
//导入菜单store
const menuStore = useMenuStore()
const contration = () => {
    // console.log(menuStore.menuWidth)
    menuStore.handleMenuWidth()
}
//全屏功能
const { isFullscreen, toggle } = useFullscreen()
//刷新功能
const refresh = () => location.reload()
//用户信息: 渲染名称
const userStore = useUserStore()
//修改密码对话框
const dialogVisible = ref(false)
//展开框事件: 修改密码 , 退出登录
const router = useRouter()
const handleCommand = (command) => {
    if (command == 'changePwd') {    //修改密码
        dialogVisible.value = true
    } else if( command == 'logout'){    //退出登录, 弹出警示框
        showConfirm('确定要退出登录吗?').then(() => {
            userStore.logout()
            showMessage('退出登录成功！')
            // 跳转登录页
            router.push('/login')
        }).catch(() => { })
    }
}
//修改密码
const formRef = ref(null)   //1.获取form实例
const formValue = reactive({     //2.给表单:model绑定变量formValue
    username: userStore.userInfo.username || '',
    password: '',
    confirmPassword: ''
})
const rules = ref({     //绑定校验规则
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
    ]
})
const submitChange = () => {
    formRef.value.validate((valid) => {     //表单校验
        if (!valid) { //输入格式不匹配
            console.log('form information formatter does not matched')
            return false
        }
        if (formValue.password != formValue.confirmPassword) {
            showMessage('两次密码输入不一致', 'error')
            return false
        }
        //发起异步请求
        changePassword(formValue).then((res) => {
            console.log(res)
            if (res.success == true) {
                showMessage('修改密码成功！请重新登录', 'success')
                userStore.logout()
                dialogVisible.value = false
                router.push('/login')
            } else {
                let message = res.message
                showMessage(message, 'error')    //错误提示
            }
        })
    })
}
// 监听 Pinia store 中的某个值的变化
watch(() => userStore.userInfo.username, (newValue, oldValue) => {
      // 在这里处理变化后的值      
      // 可以在这里执行任何你需要的逻辑
      // 重新将新的值，设置会 form 对象中
      formValue.username = newValue
});



</script>

<style scoped>
.bg-admin-header {
    background-color: #22d3ee;
}

.avator-border-config {
    outline: none;
}
</style>